<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="./vue2.7.js"></script>-->
</head>
<body>
    <div id="app">
        <ul>
            <li>{{age}}</li>
            <li>{{name}}</li>
        </ul>
        <button onclick="updateAge()">更新</button>
    </div>
</body>
<script src="./vue.js"></script>
<!--<script src="./vue2.7.js"></script>-->
<script>
    Vue.component("my-button",{
        template:"<button>全局的组件</button>"
    })

    let Sub = Vue.extend({
        template:"<button>子组件 <my-button></my-button></button>",
        components:{
            "my-button":{
                template:"<button>子组件自己声明的button</button>"
            }
        }
    })

    new Sub().$mount("#app")

    const vm = new Vue({
        el: "#app",
        data() {
            return {
                name: "szx",
                age: 18,
                address: {
                    price: 100,
                    name: "少林寺"
                },
                hobby: ["爬山","玩游戏"]
            }
        },
        // computed:{
        //     fullname(){
        //         console.log("调用计算属性")
        //         return this.name + this.age
        //     }
        // },
        // watch:{
        //     age:[
        //         (newVal,oldVal)=>{
        //             console.log(newVal,oldVal)
        //         },
        //         (newVal,oldVal)=>{
        //             console.log(newVal,oldVal)
        //         },
        //     ]
        // }
    })





    function updateAge(){
        vm.age++
    }
</script>
</html>